<template>
	<view class="y-flex">
		<view class="y-flex audio-progress position-relative" :style="{'background-color': skinColor.color_3}">
			<view class="position-absolute-cover" :style="{'background-color': skinColor.color_red, 'width': width + 'px'}"></view>
		</view>
		<view class="audio-line y-flex y-row y-align-center page-padding-gap"
		:style="{'background-color': skinColor.color_bg_1}" @tap="$Router.push({path: '/pages/find/audio/player', animationType: 'fade-in'})">
			<image v-if="poster" class="audio-poster border-radius-100 mr-40" :src="poster" mode="aspectFill"></image>
			<view class="y-flex y-flex-1 mr-20">
				<text class="fs-28 lines-1" :style="{color: skinColor.color_1}">{{title}}</text>
				<text class="fs-24 mt-20 lines-1" :style="{color: skinColor.color_3}">{{creator}}</text>
			</view>
			<com-icon :name="paused ? 'play_fill' : 'stop'" :color="skinColor.color_red" size="50" @click.stop="toggle"></com-icon>
			<com-icon class="ml-40" name="play_list" :color="skinColor.color_1" size="60" @click.stop="handlePlaylistShow"></com-icon>
		</view>
		<com-gap height="50" :color="skinColor.color_bg_1" v-if="lyricShow"></com-gap>
	</view>
</template>

<script>
	import appMixin from '@/common/mixin/app.js'
	export default {
		mixins: [appMixin],
		computed: {
			lyricShow () {
				return this.$store.getters['audio/GET_LYRIC_SHOW']
			},
			paused () {
				return this.$store.getters['audio/GET_PAUSED']
			},
			creator () {
				return this.$store.getters['audio/GET_CURRENT_CREATOR']
			},
			title () {
				return this.$store.getters['audio/GET_CURRENT_TITLE']
			},
			poster () {
				return this.$store.getters['audio/GET_CURRENT_POSTER']
			},
			currentTime () {
				return this.isSliderChanging ? this.currentTiming : this.$store.getters['audio/GET_CURRENT_TIME']
			},
			duration () {
				return this.$store.getters['audio/GET_DURATION']
			},
			width () {
				return (this.currentTime / this.duration) * this.windowWidth
			}
		},
		methods: {
			//播放和暂停
			toggle (e) {
				e.stopPropagation && e.stopPropagation()
				if ( this.paused ) {
					uni.$emit('play')
				} else {
					uni.$emit('pause')
				}
			},
			handlePlaylistShow (e) {
				e.stopPropagation && e.stopPropagation()
				this.$Router.push({
					path: '/pages/find/audio/playlist',
					animationType: 'fade-in'
				})
			}
		}
	}
</script>

<style>
	.audio-progress {
		height: 1px;
	}
	.audio-line {
		height: 140rpx;
	}
	.audio-line .audio-poster {
		width: 100rpx;
		height: 100rpx;
	}
</style>